<template>
    <h3>计算属性</h3>
    <p>{{ itbaizhan.name }}</p>
    <!-- 计算属性 调用多次只计算一次-->
    <p>{{ itbaizhanContent }}</p>
    <p>{{ itbaizhanContent }}</p>
    <!-- 方法实现 调用多少次计算多少次-->
    <p>{{ itbaizhanContent2() }}</p>
    <p>{{ itbaizhanContent2() }}</p>
    <!-- 两者区别在于：计算属性有缓存，当调用计算属性时，会先从缓存中取值，如果数据没有发生改变，则不会重新计算。
                方法没有缓存，每次调用，都会重新计算， -->
</template>

<script name="computed">
    export default{
        data(){
            return {
                itbaizhan:{
                    name:"百战程序员",
                    content:["课程","社区"]
                }
            }
        },
        //计算属性
        computed:{
            itbaizhanContent(){
            return this.itbaizhan.content.length > 0 ? "Yes" : "No"
        }
        },
        //方法
        methods:{
        itbaizhanContent2(){
            return this.itbaizhan.content.length > 0 ? "Yes" : "No"
        }
    }
    }
    
</script>